<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="txt">0</p>
    <button id="add">增加
</body>
</html>
<script>

    /*
    面向对象:专注于如何解决问题的步骤
    特点：由一个函数实现没以恶个过程的步骤，没有类和对象的概念

    面向过程：专注于哪一个对象来解决这个问题
    特点：出现一个类，从类中拿到对象，有这个对象去解决具体的问题
    */



    var obj = {
        text:document.querySelector("#txt"),
        add:document.querySelector("#add"),
        f:function(){
            this.text.innerText++;
        },
        bindEvent:function(){
            this.add.onclick = this.f.bind(this)
        }
    }
obj.bindEvent()
</script>